import { idToRgba } from "src/utils/helper";
import Base from "./Base";
import { Props } from "src/types/shape";
import utils from "src/utils";
import { shapeType } from "src/types/drawBoard";

export default class extends Base {
  image: HTMLImageElement
  dx: number = 0
  dy: number = 0
  dWidth: number = 0
  dHeight: number = 0
  constructor(image: HTMLImageElement,option:Props) {
    super(shapeType.rect)
    this.image = image
    utils.object.Assign(option, this.props)
    if (this.image) {
      this.image.onload = ()=>{
        this.dWidth = this.image.width
        this.dHeight = this.image.height
        console.log(this.image.width);
      }
    }
  }
  draw(ctx: CanvasRenderingContext2D, osCtx: OffscreenCanvasRenderingContext2D): void {
    const { x, y, width, height } = this.props

    ctx.save()
    // this.transform(ctx)
    ctx.drawImage(
      this.image,
      this.dx, this.dy,
      this.dWidth, this.dHeight,
      x, y,
      width, height
    )
    ctx.restore()
  }
  drawMirror(osCtx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void {
    const { x, y, width, height } = this.props

    // 镜像画布
    const [r, g, b, a] = idToRgba(this.getRgbaId())

    osCtx.save()

    // this.transform(osCtx)
    osCtx.beginPath()
    osCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`
    osCtx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${a})`
    osCtx.rect(x, y, width, height)
    osCtx.fill()
    osCtx.stroke()
    osCtx.closePath()

    osCtx.restore()
  }
}